<template>
    <div id="" class="timebox">
        <div class='player'>
           <div class="timebox-play-prev" @click="dolunboPrev">
                <span class='fa fa-step-backward'></span>
            </div>
            <div @click="dolunbo"  class="timebox-play">
                <span v-show="!lunboFlag" class="fa fa-play"></span>
                <span v-show="lunboFlag" class="fa fa-pause"></span>
            </div>
            <div class="timebox-play-next" @click="dolunboNext">
                <span class='fa fa-step-forward'></span>
            </div>
        </div>

        <div id="ionscroll" class="swiper-container swiper-container-horizontal">
            <!-- slides -->
            <div class="swiper-button-prev">＜</div>
            <div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(0px, 0px, 0px);">
                <div class="swiper-slide" :value="item"  :class="{active_btn:index == indexBtn}" @click="liveCallback(data[index],index)" v-for="(item,index) of dataContent" :key="index">
                    <div class="timeBar"></div>
                    <div class="timestr">{{ item.time }}</div>
                    <div class="swiper_see" v-if="item.cross"><div></div><span>{{ item.cross }}</span></div>
                </div>
            </div>
            <!-- <div class="swiper-pagination swiper-pagination-progressbar"><span class="swiper-pagination-progressbar-fill" style="transform: translate3d(0px, 0px, 0px) scaleX(0.2) scaleY(1); transition-duration: 300ms;"></span></div> -->
            <!-- <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span> -->

            <div class="swiper-button-next">＞</div>
        </div>
        <div >
        </div>
        <common ref="common"></common>
    </div>
</template>

<script>
import Swiper from '../../../static/js/swiper.min.js';
// import '../../assets/swiper.min.js';
import "../../assets/swiper.min.css";
import common from '../common';
export default {
    name: 'deliver',
    props:[""],
    components: {
        common,
    },
    filters: {
        timestr: function (value) {
            if(value.match("-")){
                return value.slice(11,13)+":"+value.slice(14,16);
            }else{
                return value.slice(8,10)+":"+value.slice(10,12);
            }
        }
    },
    data() {
        return {
            blocks: ["基本信息","24小时信息","极大风信息","实况预警信息","水位信息"],
            data:[],
            dataContent: [],
            indexBtn:0,
            lunboFlag:false,
            t:'',
        };
    },
    computed: {

    },
    methods: {
        // live过来的时间轴列表遍历
        refreshTimeline(data, type, start){
            clearInterval(this.t)
            this.data=data

            if(start === 'start'){
                this.index = 0
            }else if(start === 'end'){
                this.index = this.data.length-1
            }

            if(type.match('day')){
                this.dataContent = []
                for(let i=0; i<this.data.length; i++){
                    let info ={
                        time: '',
                        cross: ''
                    }
                    info.time = this.data[i].slice(8,10) + '日'
                    if(i !== 0){
                        let time = this.data[i].slice(5,7)
                        let lastTime = this.data[i-1].slice(5,7)
                        if(time !== lastTime){
                            info.cross = time + '月'
                        }else{
                            info.cross = ''
                        }
                    }else{
                        info.cross = ''
                    }
                    this.dataContent.push(info)
                }
            }else{
                this.dataContent = []
                for(let i=0; i<this.data.length; i++){
                    let info ={
                        time: '',
                        cross: ''
                    }
                    info.time = this.data[i].slice(11,16)
                    if(i !== 0){
                        let time = this.data[i].slice(8,10)
                        let lastTime = this.data[i-1].slice(8,10)
                        if(time !== lastTime){
                            info.cross = time + '日'
                        }else{
                            info.cross = ''
                        }
                    }else{
                        info.cross = ''
                    }
                    this.dataContent.push(info)
                }
            }

            this.maxindex = this.data.length-1
            var t=setTimeout(()=>{
                this.lttSwiper.update()
                this.lttSwiper.slideTo(this.index)
                this.indexBtn=this.index
            },300)
            this.liveCallback(this.data[this.index],this.index)
        },
        // 点击滑块选中当前时间点调用live传回时间点
        liveCallback(option,index){
            this.indexBtn=index;
            this.$emit('getmapDataP',option)
        },
        // 轮播函数
        lunbo(){
            this.indexBtn++;
            if(this.indexBtn>this.maxindex){
                this.indexBtn=0;
                this.lttSwiper.slideTo(0);
            }else{
                this.lttSwiper.slideTo(this.indexBtn-6);
            };
            this.$emit('getmapDataP', this.data[this.indexBtn])
        },
        // 点击调用轮播函数
        dolunbo(){
            this.lunboFlag=!this.lunboFlag;
            if(this.lunboFlag){
				this.t=setInterval(this.lunbo,3000);
				console.log("开始")
			}else{
				clearInterval(this.t);
				console.log("停止")
			}
        },
        dolunboPrev() {
            this.indexBtn --
            if(this.indexBtn < 0){
                this.indexBtn = this.maxindex
                this.lttSwiper.slideTo(this.indexBtn)
            }else{
                this.lttSwiper.slideTo(this.indexBtn-6)
            }
            this.$emit('getmapDataP', this.data[this.indexBtn])
        },
        dolunboNext() {
           this.lunbo()
        }
    },
    mounted() {
        this.lttSwiper = new Swiper('#ionscroll', {
            pagination:'.swiper-pagination',
            paginationType: 'progress',
            resistanceRatio : 0.3,
            slidesPerView: "auto",
            spaceBetween: 4,
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev'
            }
        });
    },

}
</script>
<style lang="less">
.clear_float:after{
    clear: both;
    display: block;
    content: "";
}
.timebox{
    position: relative;
    width: 80%;
    height: 40px;
    z-index: 12;
    background: #fff;
    padding: 10px;
    .player{
        float: left;
        width: 10%;
        & > div{
            float: left;
            width: 33.3%;
            font-size: 18px;
            text-align: center;
            cursor: pointer;
        }
    }
    #ionscroll{
        float: left;
        width: 90%;
    }
    & .swiper-button-prev{
        background: #fff;
        left: 0;
        font-size: 30px;
        // padding-right: 30px;
    }
    & .swiper-button-next{
        background: #fff;
        right: 0;
        // padding-left: 20px;
        font-size: 30px;
    }
    & .swiper-button-disabled{
        opacity: 1 !important;
    }
    & .swiper-slide{
        float: left;
        // padding: 4px 6px;
        // margin: 4px 6px;
        width: 50px;
        cursor: pointer;
        &>.timeBar{
            width: 100%;
            height: 6px;
            background: #4A4C86;;
            border: 1px solid #ccc;
            border-radius: 3px;
            margin-bottom: 3px;
        }
        &>.timestr{
            text-align: center;
        }
        & .swiper_see{
            position: absolute;
            left: 0;
            height: 60%;
            width: 2px;
            background: orange;
            top: 0;
            & > span{
                display: inline-block;
                width: 40px;
                margin-top: 24px;
                margin-left: -24px;
            }
        }
    }
    & .active_btn{
        &>.timeBar{
            background: #FDA82D;
        }
    }
    .swiper-wrapper {
        // width: 90%;
        // padding-left: 40px;
    }
}
</style>
